<template>
  <div>
    <el-tabs v-model="activeTab" type="card">
      <el-tab-pane label="申请" name="apply">
        <!-- <el-button-group>
          <el-button type="primary" :icon="Refresh" @click="handleQuery">刷新</el-button>
        </el-button-group> -->
        <el-empty v-if="!data.loading && data.resp.total == 0" description="您没有可用表单" />
        <el-row :gutter="12" class="list" v-loading="data.loading" :style="`max-height: ${maxHeight}`">
          <el-col :span="6" v-for="(item, index) in data.resp.list" :key="index">
            <el-card shadow="hover" class="item" @click="handleApply(item.formId)">
              <div class="content">
                <el-icon :size="20" color="#409EFF"><Document /></el-icon>
                {{ item.formName }}
              </div>
              <div class="sub">
                <div class="code">编码: {{ item.formCode }}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <div v-if="data.resp.total > 0" class="page">
          <el-pagination
            v-model:current-page="data.page.pageNum"
            v-model:page-size="data.page.pageSize"
            small
            :page-sizes="[16, 32, 48, 64]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.resp.total"
            @size-change="handleQuery"
            @current-change="handleQuery"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的申请单" name="list">
        <List />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElTabs, ElTabPane, ElCard, ElPagination, ElEmpty } from 'element-plus'
import { Document } from '@element-plus/icons-vue'
import { util } from '@/utils'
import { formDefApi } from '@/api/modules/flow/formDef'
import List from './List.vue'

const maxHeight = computed(() => `${util.getContentHeight() - 125}px`)

const activeTab = ref('apply')
const data = reactive({
  resp: { list: [] as any[], total: 0 },
  page: { pageNum: 1, pageSize: 16 },

  loading: false
})
const handleQuery = () => {
  data.loading = true
  const page = { ...data.page, sort: {}, filter: {} }
  formDefApi.findPage(page, { status: 1 }).then(resp => {
    if (resp.success) {
      data.resp = resp.data
    }
    data.loading = false
  })
}
onMounted(handleQuery)

const router = useRouter()
const handleApply = (id: string) => {
  router.push({ name: 'flw-inst-apply-form', query: { id } })
}
</script>

<style lang="scss" scoped>
:deep(.list) {
  overflow-y: auto;
  .el-card__body {
    &:hover {
      cursor: pointer;
    }
  }
  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: $--size-font-large;
  }
  .sub {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: $--color-text-secondary;
    font-size: $--size-font-small;
  }
}
.page {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
